<template>
  <div class="my-receiver-zone">
    <el-table
            :data="handle_rate"
            style="width:100%"
            height=90px
            :row-style='tableRowStyle'
            :header-cell-style="tableHeaderColor"
    >
      <el-table-column
              prop="name"
              label="区域"
              width="81">
      </el-table-column>
      <el-table-column
              prop="Crosses"
              label="传中"
              sortable
              width="102">
      </el-table-column>
      <el-table-column
              prop="rate"
              label="成功率"
              sortable
              width="102">
      </el-table-column>
      <el-table-column
              prop="xA"
              label="xA"
              sortable
              width="102">
      </el-table-column>
      <el-table-column
              prop="Shot_assist"
              label="射门助攻"
              sortable
              width="102">
      </el-table-column>
      <el-table-column
              prop="Assists"
              label="助攻"
              sortable
              width="102">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "CrossesZone",
    props:{
      table:{
        type:Array,
        default(){
          return []
        }
      }
    },
    data(){
      return {

      }
    },
    methods:{
      //设置表格行的样式
      tableRowStyle({row,rowIndex}){
        return {'background-color':'#F1F6F9'}
      },
      //设置表头的样式
      tableHeaderColor({row,column,rowIndex,columnIndex}){
        return {'background-color':'#F1F6F9'}
      },
    },
    computed:{
      handle_rate(){
        return this.table.map(item=>{
          return {
            ...item,
            rate: item.rate + "%"
          }
        })
      }
    }
  }
</script>

<style scoped>
  .my-receiver-zone {
    width: 591px;
    height: 90px;
    color:#656F73;
    background-color: blue;
  }
  .el-table {
    /*margin-top: 5px;*/
    /*border-color: red;*/
    font-size: 11px;
    /*line-height: 10px;*/
    background-color: #B500FE;
    /*font-weight: bold;*/
  }
  .my-receiver-zone /deep/ .el-table td {
    padding: 1px 0 ;
  }
  .my-receiver-zone /deep/ .is-leaf {
    padding: 1px 0 ;
  }
</style>